// 安全监控系统  预览模式下 断电区域相关功能的组件开发
import component from "../../Component.js"
import { LayerType, ServiceType } from "../../../experience/db/Type.js"
import Type from "../../../experience/db/Type.js";
import { $$ } from "../../../experience/utils/F7.js";

export default class LayerEditColor extends component {
    constructor() { super() };

    control() {
        // this.LayerColorDialog = null
        this.popup = this.app.popup.create({ el: '.sm-layercolor-pop' });
        $$("#layer-color-popup").on("click", async () => {
            const checkBox = this.$$('.sm-layercolor-pop article');
            const layerTemplate = await this.LayerCheckBoxTemplateCreate();
            const innerCheckBox = `
                <div class="list list-strong-ios list-outline-ios list-dividers-ios">
                    <ul>${layerTemplate}</ul>
                </div>
            `;
            checkBox.html('');
            checkBox.append(innerCheckBox);
            this.popup.open();
        });

        $$('#layer-color-submit').on('click',async () => {
            const checkboxList = document.getElementsByName('layer-color-checkbox');
            // 要修改颜色值的 图层列表
            const ExtractLayers = [];
            checkboxList.forEach((checkboxitem) => {
                if(checkboxitem.checked) {
                    ExtractLayers.push(checkboxitem.value)
                }
            });
            const submitColor = $$('#color-checkbox').val();

            const layerinfos = await this.db.operation('layer','getAll');
            const filterinfos = layerinfos.filter((info) => {
                return ExtractLayers.some(l =>l === info.layer);
            });

            const filterIds = filterinfos.map(info => info.id);
            const { data } = await this.api.updateLayerRenderColor(
                ServiceType.Meta_Id, filterIds, submitColor
            );

            await this.db.refresh(LayerType.Layer,data.layers);

            // 同步图层颜色完成后，在把indexdb中的图纸也进行 同步
            await this.db.refreshMeta(data.meta);

            // 更新图层以及图层颜色
            await this.drawer.refresh();
            await this.drawer.refreshLayerCustomColor();
        })
        this.$$('#layer-color-Cancel').on('click',() => {});
    }

    template() {
        const div = `
            <div class="popup upload-popup sm-layercolor-pop" 
                style="height: 340px; width: 630px; left:50%; margin-left: -315px; margin-top: 20px; top:0">
                <header style="display: flex;align-items: center;gap: 10px">
                    <span>图层颜色设置</span>
                    <input type="color" style="border-color: lightgray" id="color-checkbox" />
                </header>
                <article style="height: 240px;overflow-y: auto">
                </article>
                <footer class="uploader-footer">
                    <p style="flex: 3"></p>
                    <div style="flex: 1;width: 90px">
                        <button style="flex: 1" class="button button-fill color-theme-blue popup-close" 
                            id="layer-color-submit">
                            确定
                        </button>
                    </div>
                    <div style="flex: 1;width: 90px">
                        <button id="layer-color-Cancel" class="button button-fill color-gray popup-close">
                            取消
                        </button>
                    </div>
                </footer>
            </div>
        `;

        const LayerColorEditBtn = `
            <div id="layer-color-popup" class="GisUtilIcon" 
                style="position: absolute;top: 250px;left: 25px;z-index: 999">
                <i class="fas fa-palette"></i>
            </div>
        `;

        $$("body").append(LayerColorEditBtn);
        $$('#app').append(div);
    }

    async LayerCheckBoxTemplateCreate() {
        const layers = await this.db.operation(Type.Layer,'getAll');
        let checkBoxTemplate = '';
        layers.forEach((layer) => {
            checkBoxTemplate = checkBoxTemplate.concat(`
                <li>
                    <label class="item-checkbox item-checkbox-icon-start item-content">
                        <input type="checkbox" name="layer-color-checkbox" value="${layer.layer}" />
                        <i class="icon icon-checkbox"></i>
                        <div class="item-inner">
                            <div class="item-title">${layer.layer}</div>
                        </div>
                    </label>
                </li>
            `);
        });

        return checkBoxTemplate;
    }
}